<template>
    <div class="page">
        <div class="content">
            <div class="Top">
                <h2>{{ introObj.name }}</h2>
                <div>({{ introObj.ts_code }})</div>
                <el-button @click="clickWatch" class="appendStock" size="small" :type="isInWatchList ? 'default':'primary'">{{isInWatchList ? '取消自选' : '加自选'}}</el-button>
            </div>
            <el-tabs v-model="activeTab" style="margin-top: 15px;">
                <el-tab-pane label="K线图" name="StockKPicture">
                    <StockKPicture v-if="introObj.name" :introObj="introObj" />
                </el-tab-pane>
                <el-tab-pane label="介绍" name="introduce">
                    <introduce :introObj="introObj" />
                </el-tab-pane>
                <el-tab-pane label="相关新闻" name="jornalismPart">
                    <jornalism-part :stockId="stockId"/>
                </el-tab-pane>
                
                <el-tab-pane label="相关论坛" name="forumpart">
                    <forumpart :stockId="stockId"/>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script setup>
import Introduce from "@/components/SearchPage/PageTop/introduce.vue";
import JornalismPart from "@/components/SearchPage/journalismPart/jornalismPart.vue";
import StockKPicture from "@/components/SearchPage/StockKPicture/StockKPicture.vue";
import Forumpart from "@/components/SearchPage/forumPart/forumpart.vue";
import { useRoute } from 'vue-router'
import { computed, onMounted, ref } from "vue";
import { getStockInfoApi } from "@/api/stock";
import {getIsWatchedApi} from "@/api/stock";
import { ElMessage } from "element-plus";
import { addWatchlistApi, removeWatchlistApi } from "@/api/watchlist";
import { useCounterStore } from "@/stores/counter.js";

const route = useRoute()
const stockId = ref(route.query.stockId)
const stock = ref()
// 定义当前激活的标签页
const activeTab = ref('StockKPicture');
const watchlistId = ref()
const isInWatchList = ref(false)
const store = useCounterStore()
const userMessage = ref(store.UserMessage)

const getStockInfo = () => {
    getStockInfoApi(stockId.value).then(res => {
        stock.value = res
    })
}

const introObj = computed(() => {
    return {
        stockId: stockId.value,
        name: stock.value?.stockName,
        ts_code: stock.value?.stockCode,
    }
})

const getIsInWatchList = () => {
    if (!userMessage.value || !userMessage.value.id) {
        return
    }
    // 判断是否在自选股列表中
    isInWatchList.value = getIsWatchedApi(stockId.value).then(res => {
        // console.log("isInWatchList:", res);
        watchlistId.value = res
        if(watchlistId.value){
            isInWatchList.value = true
        }else{
            isInWatchList.value = false
        }
    })
}

const clickWatch = () => {
    if (!userMessage.value || !userMessage.value.id) {
        ElMessage.warning('请先登录')
        return
    }
    if (isInWatchList.value) {
        // 取消自选
        removeWatchlistApi(watchlistId.value).then(res => {
            ElMessage.success('取消自选成功')
        })
    } else {
        // 加自选
        let watchlist = {}
        watchlist.stockCode = stock.value.stockCode
        watchlist.userId = userMessage.value.id
        watchlist.stockId = stockId.value 
        addWatchlistApi(watchlist).then(res => {
            ElMessage.success('加自选成功')
            watchlistId.value = res
        })
    }
    isInWatchList.value = !isInWatchList.value
}



onMounted(() => {
    getStockInfo()
    getIsInWatchList()
})
</script>

<style scoped>
.page {
    width: 100%;
    
    background-color: #f7f7f7;
}
.content{
    background-color: white;
    width: 84%;
    padding-left: 2%;
    padding-right: 2%;
    margin: 0 auto;
}

.Top {
    margin-top: 20px;
    margin-left: -2%;
    display: flex;
    border-bottom: 1px solid #efefef;
}

.Top div:nth-child(2) {
    font-size: 22px;
    line-height: 33px;
    font-weight: 800;
    margin-left: 8px;
}

h2 {
    margin: 0 0 0 20px;
}

.appendStock {
    margin-left: 43px;
    margin-top: 6px;
}
</style>